<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>

</head>
<body>

   <input type="button" value="新增元素" id="btn">
   <div class="father">

   	   <p>1111111</p>
   	   <p>2222222</p>
   	   <p>3333333</p>
   	   <p>4444444</p>

   </div>
	
</body>
</html>
<script type="text/javascript">
	//给按钮注册事件
	$('#btn').click(function(){
		//点击按钮，新增一个p元素
		$("<p>我是新增的p元素</p>").appendTo('.father');
	});


	//delegate:事件委托
	//事件委托的好处：动态创建的元素也能有事件
	//给p的父元素div注册委托事件，但最终执行的不是div,而且div的子元素p
	//第一个参数：selector：事件最终由谁来执行
	//第二个参数：eventType：事件的类型
	//第三个参数：函数，要做什么
	$('.father').delegate('p', 'click', function() {
		alert('额呵呵呵');
	});
</script>